<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>订单详情</title>
    <link href="../../css/common.css" rel="stylesheet"/>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/order/orderDetail.css" rel="stylesheet"/>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/fastclick.js"></script>
    <script src="../../js/api.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/vue-common.js"></script>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>订单详情</span>
        <div class="icon"><img src="../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container">
        <div v-if="orderDetail.orderStatus > 0 ">
            <div v-for="(item,index) in orderDetail.orderEngineerVos ">
                <div class="card-box eng-box">
                    <div class="eng-header">
                        <span class="left">维护工程师</span> <span
                            class="right">{{orderDetail.orderStatus | orderStatusFilter}}</span>
                    </div>
                    <div class="eng-header-desc">
                        <p><img class="eng-img" :src="showCommonImg(item.engIcon)" alt=""></p>
                        <div class="eng-info">
                            <div class="name">{{item.engName}}</div>
                        </div>
                        <img @click="callPhone(item.engPhone)" class="icon-call" src="../../img/common/ic_phone.png"
                             alt="">
                    </div>
                </div>

                <div v-if="!historyStatus" class="card-box eng-position">
                    <div class="left"><img @click="goUserMap(item.engXCode,item.engYCode)"
                                           src="../../img/common/ic_location.png" alt="">工程师位置信息
                    </div>
                </div>
            </div>
        </div>

        <div v-if="historyStatus" class="card-box fixed-tab">
            <div class="left" @click="goErrorInfo"><img src="../../img/order/ic_trouble.png" alt="">故障信息</div>
            <div class="right" @click="goFixInfo"><img src="../../img/order/ic_service.png" alt="">维修详情</div>
        </div>

        <div class="card-box order-info">
            <div class="order-title">订单编号：{{orderDetail.orderNo}}</div>
            <div>
                <span class="label-weight">建单时间:</span>
                <span class="label-light">{{ orderDetail.beginDate | dataFormat}}</span>
            </div>

            <div>
                <span class="label-weight">机具信息:</span>
                <span class="label-light"> {{ orderDetail.atmCode}}-{{orderDetail.modelCode}}-{{orderDetail.atmInsSide}}-{{ orderDetail.serialNumber}}</span>
            </div>

            <div>
                <span class="label-weight">分行:</span>
                <span class="label-light">{{ orderDetail.orgGradeA}}</span>
            </div>

            <div>
                <span class="label-weight">一级支行:</span>
                <span class="label-light">{{ orderDetail.orgGradeB}}</span>
            </div>

        </div>
        <div v-if="!historyStatus" class="card-box device-info" @click="goErrorInfo">
            <span>故障信息</span>
            <img src="../../img/common/btn_more.png" alt="">
        </div>

        <div class="card-box device-address">
            <div class="label-light">机具地址</div>
            <div class="label-weight">
                <span>{{ orderDetail.atmAddress}}</span> <img @click="goMap(orderDetail.xCode,orderDetail.yCode)"
                                                              src="../../img/common/btn_map.png" alt="">
            </div>
        </div>

        <div class="card-box device-time device-address">
            <div class="label-light">特殊需求</div>

            <div class="label-light row-time">
                <span class="label-weight">预约时间:
                    <!--<img  v-if="orderDetail.editStatus == 1"  class="yuyue-icon"-->
                    <!--src="../../img/common/btn_details_modificationtime@3x.png">-->
                </span>
                <img v-if="orderDetail.editStatus == 1" @click="goUpdateTime" src="../../img/common/btn_more.png"
                     alt="">
                <span class="label-light"><span class="right-text"> {{ orderDetail.dateDate | dataFormat}}</span></span>
            </div>

            <div class="label-light row-time">
                <span class="label-weight">行内对接人:</span> <span
                    class="label-light">{{orderDetail.abutmentUserName}}</span>
                <img v-if="orderDetail.editStatus == 1" @click="goUpdateContact" src="../../img/common/btn_more.png"
                     alt="">
                <img style="margin-right: 2rem" @click="callPhone(orderDetail.abutmentUserPhone)"
                     src="../../img/common/ic_phone.png" alt="">
            </div>
        </div>

        <div @click="goAddComment"
             v-if=" orderDetail.isReview == 0 && (orderDetail.orderStatus ==5||orderDetail.orderStatus ==6 ) "
             class="xl-btn normal no-shadow">写评价
        </div>
        <div @touchstart="cancelOrder"
             v-show="orderDetail.orderStatus == 0 ||orderDetail.orderStatus == 1 || orderDetail.orderStatus == 2|| orderDetail.orderStatus == 11 "
             class="xl-btn normal no-shadow">{{btnShowText.btnText}}
        </div>

        <!--<div @touchstart="cancelOrder" class="xl-btn normal no-shadow">取消接单</div>-->

        <div v-if="orderDetail.isReview == 1 ">
            <div class="comment-title">订单评价</div>
            <div class="card-box comment">
                <div class="comment-header">
                    <div class="left">
                        <img class="comment-user" :src="showCommonImg(orderDetail.orderCommVo.uImgUrl)" alt="">
                    </div>

                    <div class="right">
                        <div> {{orderDetail.orderCommVo.uName}}</div>
                        <div>
                            <xlb-comment :name-label="true" v-model="orderDetail.orderCommVo.point"></xlb-comment>
                        </div>
                    </div>

                    <div class="time">{{dateFormatShort(orderDetail.orderCommVo.createDate)}}</div>
                </div>
                <div class="comment-text">
                    {{orderDetail.orderCommVo.note}}
                </div>
            </div>
        </div>

    </div>

    <xlb-modal v-model="dialogMod.mod">
        <div slot="header">{{btnShowText.diaLogTitle}}</div>
        <div slot="content">
            <div>
                <input v-model="canCelDesc" class="input-no-outer" type="text" :placeholder="btnShowText.placeholder">
            </div>
        </div>
        <div slot="footer-left">取消</div>
        <div @click="doCancelOrder" slot="footer-right">提交</div>
    </xlb-modal>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            orderId: '',
            //订单详情
            orderDetail: {
                orderEngineerVos: []
            },
            imgServer: '',
            imgShow: false,
            imgShowUrl: '../../img/common/btn_addpic@3x.png',
            comment: {
                point: 2
            },
            dialogMod: {
                title: '',
                mod: false,
                content: ''
            },
            canCelDesc: '',
            btnSubmitText: '',
            commonInfo: {
                point: '',
                note: '',
                show: false
            }
        },
        computed: {
            historyStatus: function () {
                var orderStatus = this.orderDetail.orderStatus;
                if (orderStatus) {
                    orderStatus = parseInt(orderStatus);
                    var statusArray = [5, 6, 7, 12];
                    if (statusArray.indexOf(orderStatus) >= 0) {
                        return true
                    }
                }
                return false;

            },
            btnShowText: function () {
                var orderStatus = this.orderDetail.orderStatus;
                var desc1 = "取消订单：";
                var desc2 = "请填写取消订单原因：";
                var desc3 = "取消订单";
                if (orderStatus == '1' || orderStatus == '2') {
                    desc1 = "自行修复";
                    desc2 = "请填写处理方式";
                    desc3 = "自行修复";
                }

                return {diaLogTitle: desc1, placeholder: desc2, btnText: desc3}
            },
            isCancel: function () {
                var orderStatus = this.orderDetail.orderStatus;
                if (orderStatus == '1' || orderStatus == '2') {
                    return false;
                }
                return true;
            }
        },
        filters: {
            cancelBtnDesc: function (orderStatus) {
                if (orderStatus == '1' || orderStatus == '2') {
                    return "自行修复";
                } else {
                    return "撤销订单";
                }
            }
        },

        methods: {
            // 维修详情
            goFixInfo: function () {
                redirect('pages/order/fixDetail.html?orderId=' + this.orderId);
            },
            // 维修详情
            goUpdateTime: function () {
                redirect('pages/order/updateTime.html?orderId=' + this.orderId);
            },
            goAddComment: function () {
                redirect('pages/order/comment.html?orderId=' + this.orderId);
            },
            // 维修详情
            goCommonInfo: function () {
                redirect('pages/order/comment.html');
            },
            //获取订单详情
            getOrderDetail: function (orderId) {
                Resource.get(ORDER_DETAIL_API, {id: orderId}, function (res) {
                    vm.orderDetail = res;
                })

            },
            //取消订单
            cancelOrder: function () {
                this.dialogMod.mod = true;
            },
            doCancelOrder: function () {
                var canCelDesc = this.canCelDesc;
                if (!canCelDesc) {
                    if(this.isCancel){
                        return mui.toast("请填写取消原因")
                    }else {
                        return mui.toast("请填写处理方式")
                    }

                }
                Resource.post(ORDER_CANCEL_API, {orderId: vm.orderId, orderDesc: canCelDesc}, function (res) {
                    //订单列表
                    redirectMainPage('pages/order/list.html');
                })

            },
            //打电话
            callPhone: function (phone) {
                goCallPhone(phone);
            },
            goUpdateContact: function () {
                redirect('pages/order/contact/update.html?orderId=' + this.orderId)
            },
            goCommon: function () {
                redirect('pages/order/orderCommonAdd.html?orderId=' + this.orderId)
            },
            // 挑战故障详情
            goErrorInfo: function () {
                redirect('pages/order/errorDetail.html?orderId=' + this.orderId)
            },
            goMap: function (xCode, yCode) {
                goMapPage(xCode, yCode, 0);
            },
            goUserMap: function (xCode, yCode) {
                goMapPage(xCode, yCode, 1);
            },
            //获取订单详情
            getCommonInfo: function (orderId) {
                Resource.get(ORDER_DETAIL_COMMON_API, {id: orderId}, function (res) {
                    console.log(JSON.stringify(res));

                    vm.commonInfo.show = true;
                })

            },
            showCommonImg: function (img) {
                if (img) {
                    return getImgServer() + img;
                } else {
                    return '../../img/common/default_person.jpg'
                }
            }

        }
    });

    /**
     * 处理评论返回
     */
    function dealAddCommon(point, note) {
        vm.orderDetail.isReview = 1;
        vm.getOrderDetail(vm.orderId);

    }

    /**
     * 处理更改时间返回
     */
    function dealUpdateTime(time) {
        vm.orderDetail.dateDate = time;
    }

    // 处理选择联系人
    function dealSelectContact(data) {
        data = JSON.parse(data);
        vm.orderDetail.abutmentUserName = data.name;
        vm.orderDetail.abutmentUserPhone = data.phone;
    }

    mui.plusReady(function () {
        var self = plus.webview.currentWebview();
        vm.imgServer = getImgServer();
        var orderId = self.orderId;
        if (orderId == '' || orderId == 'undefined') {
            return;
        }
        console.log('listen ----------orderId =' + orderId);
        vm.orderId = orderId;
        vm.orderDetail = {
            orderEngineerVos: []
        };
        vm.getOrderDetail(orderId);

    })
    //监听初始化
    document.addEventListener('changeTab', function (data) {
        console.log(data);
        vm.getOrderDetail(vm.orderId);
    })
    mui.init({
        beforeback: function () {
            refreshPage('pages/order/list.html');
            return true;
        }
    });

</script>
</body>
</html>